<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useForm, useFormRules } from '@/hooks/common/form';
import { $t } from '@/locales';
import type { ApiSysLogInput, ApiSysLogOut } from '@/api-services';
import { UserApi } from '@/api-services/apis/user-api';
import { feature, getAPI } from '@/axios-utils';
import { queryDone } from '@/utils/api';
import { REG_PWD, REG_USER_NAME } from '@/constants/reg';
import { ApiroleserviceApi } from '@/api-services/apis/apiroleservice-api';
import { NetoKit } from '@/typings/neto';
import { SyslogApi } from '@/api-services/apis/syslog-api';
import { getColor } from '@/hooks/common/color';


interface Props {
  /** the type of operation */
  operateType: UI.TableOperateType;
  /** the edit row data */
  rowData?: ApiSysLogOut | null;
}

const props = defineProps<Props>();

interface Emits {
  (e: 'submitted'): void;
}

const emit = defineEmits<Emits>();

const visible = defineModel<boolean>('visible', {
  default: false
});

const { formRef, validate, restoreValidation } = useForm();
const { defaultRequiredRule } = useFormRules();


type Model = NetoKit.NullToUndefined<ApiSysLogOut>;
const model = ref(createDefaultModel());
// string转换为number
// model.value.roleIds = model.value.roleIdStr?.split(',').map(Number);
function createDefaultModel(): Model {
  return {
    id: 0
  };
}


const loading = ref(false);
async function handleInitModel() {
  model.value = createDefaultModel();

  if (props.operateType === 'edit' && props.rowData) {


    // 提交请求
    loading.value = true;
    const [err, res] = await feature(getAPI(SyslogApi).get(props.rowData.id!));
    loading.value = false;

    queryDone(err, async () => {
      if (res?.data.data) {
        // model.value = res.data.data;
        console.log(res.data.data)
        Object.assign(model.value, res?.data.data);

      } else {
        // 失败
        window.$message?.error($t('common.failed'));
      }
    });


    // Object.assign(model.value, props.rowData);
    // model.value.requestUrl = props.rowData.requestUrl!;
    // console.log(props.rowData.requestUrl)
  }
}





watch(visible, () => {
  if (visible.value) {
    handleInitModel();
    restoreValidation();
    // getRoleOptions();
  }
});
</script>

<template>
  <NModal v-model:open="visible" :title="$t('page.sysLog.logTypeEnum.systemLog')" :show-full-screen="true"
    width="800px">
    <div v-if="loading" class="spin-box" v-loading="loading">
      <!-- <ElSpin size="large"></ElSpin> -->

    </div>
    <ElForm v-else ref="formRef" label-width="auto" :model="model">

      <ElRow :gutter="16">
        <ElCol :lg="24" :xs="24">
          <ElCard hoverable :title="$t('page.sysLog.baseInformation')">
            <ElRow :gutter="16">
              <ElCol :lg="12" :xs="24">
                <ElFormItem :label="$t('page.sysLog.id')" name="id">
                  {{ model.id }}
                </ElFormItem>
              </ElCol>


              <ElCol :lg="12" :xs="24">
                <ElFormItem :label="$t('page.sysLog.tableId')" name="tableId">
                  {{ model.tableId }}
                </ElFormItem>
              </ElCol>

              <ElCol :lg="6" :xs="12">
                <!-- 日志类型 -->
                <ElFormItem :label="$t('page.sysLog.logType')" name="logType">
                  <ElTag type="success" v-if="model.logType == 0">{{ $t('page.sysLog.logTypeEnum.systemLog') }}</ElTag>
                  <ElTag type="primary" v-if="model.logType == 1001">{{ $t('page.sysLog.logTypeEnum.operationLog') }}
                  </ElTag>


                </ElFormItem>
              </ElCol>
              <ElCol :lg="6" :xs="12">
                <ElFormItem :label="$t('page.sysLog.isSuccess')" name="isSuccess">
                  <ElTag type="success" v-if="model.isSuccess">{{ $t('common.success') }}</ElTag>
                  <ElTag type="warning" v-else>{{ $t('common.failed') }}</ElTag>
                </ElFormItem>
              </ElCol>
              <ElCol :lg="6" :xs="12">
                <ElFormItem :label="$t('page.sysLog.elapsedTime')" name="elapsedTime">
                  {{ model.elapsedTime }}ms
                </ElFormItem>
              </ElCol>

              <ElCol :lg="6" :xs="12">
                <ElFormItem label="IP" name="ip">
                  {{ model.ip }}
                </ElFormItem>
              </ElCol>

              <ElCol :lg="12" :xs="24">
                <ElFormItem :label="$t('page.sysLog.requestUrl')" name="requestUrl">
                  {{ model.requestUrl }}
                </ElFormItem>
              </ElCol>
              <ElCol :lg="12" :xs="24">
                <ElFormItem :label="$t('common.creationTime')" name="creationTime">
                  {{ model.creationTime }}
                </ElFormItem>
              </ElCol>

              <ElCol :lg="24" :xs="24" v-if="model.tag && model.tag.length > 0">

                <ElFormItem :label="$t('page.sysLog.tag')" name="tag">
                  <ElSpace>

                    <ElTag v-for="(item, index) in model.tag.split(',')" :key="item">{{ item }}
                    </ElTag>
                  </ElSpace>
                </ElFormItem>
              </ElCol>
            </ElRow>

          </ElCard>
        </ElCol>
        <ElCol :lg="24" :xs="24">
          <ElCard hoverable :title="$t('page.sysLog.message')">
            <p v-if="model.message && model.message.length > 0"> {{ model.message }}</p>
            <ElEmpty v-else></ElEmpty>
          </ElCard>
        </ElCol>

        <ElCol :lg="24" :xs="24">
          <ElCard hoverable :title="$t('page.sysLog.exception')">
            <p v-if="model.exception && model.exception.length > 0"> {{ model.exception }}</p>
            <ElEmpty v-else></ElEmpty>
          </ElCard>
        </ElCol>

        <ElCol :lg="24" :xs="24">
          <ElCard hoverable :title="$t('page.sysLog.logContent')">
            <p v-if="model.logContent && model.logContent.length > 0"> {{ model.logContent }}</p>
            <ElEmpty v-else></ElEmpty>
          </ElCard>
        </ElCol>

      </ElRow>
    </ElForm>
    <template #footer>

    </template>
  </NModal>
</template>

<style scoped>
.spin-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
</style>
